<template>
  <div>
    我是详情页
    <button @click="go2next">下一篇</button>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log('$route', this.$route);
    // 由此可以知道
    // 通过 this.$route.query 可以获取传递的query参数
    // 所有的值类型都会转换为字符串
    console.log('query', this.$route.query);
  },
  created() {
    this.getContent();
  },
  watch: {
    $route(nv, ov) {
      console.log('通过监听器来感知路由参数的变化', nv);
    },
  },
  methods: {
    getContent() {
      console.log('获取文档详情内容');
    },
    go2next() {
      const { id } = this.$route.query;
      const nextid = Number(id) + 1;
      // 同路由跳转 当前的组件不会销毁 所以就不会重新的创建 下一次的时候created不会再次触发
      this.$router.push({ path: '/detail', query: { id: nextid } });
    },
  },
  beforeRouteUpdate() {
    // 如果是当前的路由的参数发生变化 我们可以通过 beforeRouteUpdate  来响应这个变化
    // this.getContent();
    // console.log('路由更新');
  },
  beforeRouteEnter(to, from) {
    console.log('有人要进入到 当前的详情页');
    // return false;
  },
};
</script>
